<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="Author" content="Tencent.AlloyTeam" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,target-densitydpi=medium-dpi" />

	<link rel="stylesheet" type="text/css" href="css/mui-base.css" />
	<link rel="stylesheet" type="text/css" href="css/mui-slider.css" />
	<style type="text/css">
		.container{
			padding: 10px;
		}
		h4{
			margin: 10px 0;
		}
	</style>
</head>

<div class="container">
	<h4>slider</h4>
	<div>
	    <div id="slider" class="slider slider_white" style="margin-top:40px;">
	    	<input type="range" />
	    	<a class="slider_handler"></a>
	    </div>		
	    <div id="w_slider" class="slider slider_white" style="margin-top:40px;">
	    	<input type="range" />
	    	<div class="slider_range white"></div>
	    	<a class="slider_handler"></a>
	    </div>	
	    <div id="b_slider" class="slider slider_white" style="margin-top:40px;">
	    	<input type="range" />
	    	<div class="slider_range blue"></div>
	    	<a class="slider_handler"></a>
	    </div>	
	    <div id="g_slider" class="slider slider_white" style="margin-top:40px;">
	    	<input type="range" />
	    	<div class="slider_range green"></div>
	    	<a class="slider_handler"></a>
	    </div>	

        <div id="v_slider" class="slider slider_white vertical" style="margin-top:40px;float:left;">
	    	<input type="range" />
	    	<a class="slider_handler"></a>
	    </div>	
      	<div id="v_w_slider" class="slider slider_white vertical" style="margin:40px 0 0 40px;float:left;">
	    	<input type="range" />
	    	<div class="slider_range white"></div>
	    	<a class="slider_handler"></a>
	    </div>	
    	<div id="v_b_slider" class="slider slider_white vertical" style="margin:40px 0 0 40px;float:left;">
	    	<input type="range" />
	    	<div class="slider_range blue"></div>
	    	<a class="slider_handler"></a>
	    </div>	
    	<div id="v_g_slider" class="slider slider_white vertical" style="margin:40px 0 0 40px;float:left;">
	    	<input type="range" />
	    	<div class="slider_range green"></div>
	    	<a class="slider_handler"></a>
	    </div>	
	</div>
</div>
<script type="text/javascript" src="js/JM.js"></script>
<script type="text/javascript" src="js/slider.js?123"></script>
<script type="text/javascript">
	var sc = MUI.Slide({
		id:"slider",
		currentIndex:4,
		fastChange:true	
	});
	sl.setValue(20);
	var w_sl = MUI.Slider({
		id:"w_slider"
	});
	w_sl.setValue(40);
	var b_sl = MUI.Slider({
		id:"b_slider"
	});
	b_sl.setValue(60);
	var g_sl = MUI.Slider({
		id:"g_slider"
	});
	g_sl.setValue(80);

	var v_sl = MUI.Slider({
		id:"v_slider",
		vertical:true
	});
	v_sl.setValue(80);
	var v_w_sl = MUI.Slider({
		id:"v_w_slider",
		vertical:true
	});
	v_w_sl.setValue(60);
	var v_b_sl = MUI.Slider({
		id:"v_b_slider",
		vertical:true
	});
	v_b_sl.setValue(40);
	var v_g_sl = MUI.Slider({
		id:"v_g_slider",
		vertical:true
	});
	v_g_sl.setValue(20);


</script>
</body>
</html>
